<template>
	<!-- 美宿列表 -->
	<section class="product-list">
		<navigator class="flex-center-v product-item" url="/pages/detail/Detail" v-for="(item,index) in List" :key="index">
			<view class="flex-shrink cover">
				<img :src="item.image">
			</view>
			<view class="flex-grow">
				<h4 class="line-2 name">{{item.title}}</h4>
				<p class="line-2 intro">{{item.desc}}</p>
				<p class="tags-wrap">
				    <text class="add-tag" v-for="(tag,i) in item.tags" :key="i">{{tag}}</text>
				</p>
			</view>
		</navigator>
	</section>
</template>

<script>
    export default{
        data(){
            return{
                List:[
                    {
                        image:"http://p-product-pic-zj.tourzj.com/2018/0729/27cd39fd.jpg!640X360",
                        title:"温州墟里壹号客栈",
                        desc:"墟里位于温州永嘉，可以被称为淡然田园最美古村民宿。陶渊明的那句，暖暖远人村，依依墟里烟，成就了现在的4A级景区楠溪江中游风景古村",
                        tags:["度假","休闲","安静"]
                    },
                    {
                        image:"http://p-product-pic-zj.tourzj.com/2018/0729/fc9988c4.jpg!640X360",
                        title:"莫干山隐西39精品民宿",
                        desc:"莫干山隐西39精品民宿，隐居于莫干山下的精品民宿",
                        tags:["休闲","高雅","安静"]
                    },
                    {
                        image:"http://p-product-pic-zj.tourzj.com/2018/0729/fc9988c4.jpg!640X360",
                        title:"莫干山隐西39精品民宿",
                        desc:"莫干山隐西39精品民宿，隐居于莫干山下的精品民宿",
                        tags:["休闲","高雅","安静"]
                    }
                ]
            }
        }
    }
</script>

<style>
    @import '/static/css/reset.css';
	.product-item {
	    padding: 1.2rem 1rem;
	    border-top: .1rem solid #f2f2f2;
	}
	
	.flex-center-v {
	    display: flex;
	    align-items: center;
	}
	
	.product-item .cover {
	    position: relative;
	    margin-right: 1rem;
	    width: 40%;
	}
	
	.flex-shrink {
	    flex-shrink: 0;
	}
	
	img {
	    border: 0;
	    display: block;
	    width: 100%;
	}
	
	.flex-grow {
	    flex-grow: 1;
	}
	
	.product-item .line-2 {
	    text-overflow: ellipsis;
	    overflow: hidden;
	    display: -webkit-box;
	    -webkit-box-orient: vertical;
	    -webkit-line-clamp: 2;
	}
	
	.product-item .name {
	    font-weight: 400;
	    line-height: 2rem;
	    color: #2d2d2d;
	    white-space: pre-wrap;
	    font-size: 16px;
	    margin-bottom: .1rem;
	}
	
	.product-item .intro {
	    line-height: 1.5rem;
	    color: #9b9b9b;
	    font-size: 12px;
	}
	
	p {
	    font-size: 14px;
	    margin-top: 0;
	    margin-bottom: 10px;
	    color: #8f8f94;
	}
	
	.tags-wrap{
		margin: 0;
		padding: 0;
	}
	
	.product-item .add-tag {
	    font-size: 12px;
	    display: inline-block;
	    padding: .2rem .5rem;
	    margin: .1rem .1rem 0;
	    border-width: 1px;
	    border-style: solid;
	    border-radius: .4rem;
	}
	
	.product-item :nth-child(1).add-tag {
	    color: #03abf7;
	    border-color: #03ABF7;
	}
	
	.product-item :nth-child(2).add-tag {
	    color: #F0AD4E;
	    border-color: #F0AD4E;
	}
	
	.product-item :nth-child(3).add-tag {
	    color: #8A6DE9;
	    border-color: #8A6DE9;
	}
</style>
